<template>
  <div class="inventory">
    <h4 class="section-title">
      <span class="icon">⚠️</span>
      库存预警管理
    </h4>
    
    <div class="inventory-alerts">
      <div 
        v-for="item in inventoryItems" 
        :key="item.id"
        class="inventory-item"
        :class="{
          'low-stock': item.status === 'low',
          'expired': item.status === 'expired'
        }"
      >
        <div class="item-info">
          <h5>{{ item.drugName }}</h5>
          <p>{{ item.description }}</p>
        </div>
        <div class="stock-level">
          <div class="progress-bar">
            <div 
              class="progress-fill"
              :class="item.status"
              :style="{ width: item.percentage + '%' }"
            ></div>
          </div>
          <span 
            class="status-text"
            :class="item.status"
          >
            {{ item.statusText }}
          </span>
        </div>
        <div class="actions">
          <button class="action-btn" @click="handleAction(item.id, 'order')">订货</button>
          <button class="action-btn" @click="handleAction(item.id, 'details')">详情</button>
        </div>
      </div>
    </div>

    <div class="storage-tips">
      <h5>
        <span class="icon">💡</span>
        存储提醒
      </h5>
      <ul>
        <li>胰岛素需要冷藏保存 (2-8°C)</li>
        <li>避光药品请放置在阴凉处</li>
        <li>定期检查药品有效期</li>
        <li>保持仓库环境干燥通风</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface InventoryItem {
  id: string
  drugName: string
  description: string
  status: 'normal' | 'low' | 'expired'
  percentage: number
  statusText: string
}

const inventoryItems = ref<InventoryItem[]>([
  {
    id: 'I001',
    drugName: '阿莫西林胶囊',
    description: '安全库存: 50盒 | 当前库存: 15盒',
    status: 'low',
    percentage: 30,
    statusText: '库存不足'
  },
  {
    id: 'I002',
    drugName: '感冒灵颗粒',
    description: '批号: 20231201 | 有效期至: 2024-12-01',
    status: 'expired',
    percentage: 100,
    statusText: '15天后过期'
  },
  {
    id: 'I003',
    drugName: '维生素B复合片',
    description: '安全库存: 30盒 | 当前库存: 8盒',
    status: 'low',
    percentage: 15,
    statusText: '严重不足'
  },
  {
    id: 'I004',
    drugName: '布洛芬片',
    description: '安全库存: 40盒 | 当前库存: 120盒',
    status: 'normal',
    percentage: 85,
    statusText: '库存充足'
  }
])

const handleAction = (itemId: string, action: string) => {
  if (action === 'order') {
    alert(`进入进货管理: ${itemId}`)
  } else if (action === 'details') {
    alert(`查看详情: ${itemId}`)
  }
}
</script>

<style scoped>
.inventory {
  font-size: 12px;
}

.section-title {
  margin: 15px 0 15px 0;
  font-size: 13px;
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon {
  font-size: 16px;
}

.inventory-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
}

.inventory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: box-shadow 0.2s;
}

.inventory-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.inventory-item.low-stock {
  border-left: 4px solid #ff9800;
  background: #fff8e1;
}

.inventory-item.expired {
  border-left: 4px solid #f44336;
  background: #ffebee;
}

.item-info h5 {
  color: #333;
  margin-bottom: 4px;
  font-size: 13px;
}

.item-info p {
  color: #666;
  font-size: 11px;
  margin: 0;
}

.stock-level {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
}

.progress-bar {
  width: 100px;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  transition: width 0.3s;
  border-radius: 4px;
}

.progress-fill.normal {
  background: #4CAF50;
}

.progress-fill.low {
  background: #ff9800;
}

.progress-fill.expired {
  background: #f44336;
}

.status-text {
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}

.status-text.normal {
  color: #4CAF50;
}

.status-text.low {
  color: #ff9800;
}

.status-text.expired {
  color: #f44336;
}

.actions {
  display: flex;
  gap: 5px;
}

.action-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
  white-space: nowrap;
}

.action-btn:hover {
  color: #2980b9;
}

.storage-tips {
  background: #e8f5e8;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #4CAF50;
}

.storage-tips h5 {
  color: #2e7d32;
  margin-bottom: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.storage-tips ul {
  margin: 0;
  padding-left: 20px;
}

.storage-tips li {
  font-size: 11px;
  color: #2e7d32;
  margin-bottom: 4px;
}

/* 响应式 */
@media (max-width: 768px) {
  .inventory-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .stock-level {
    justify-content: space-between;
  }
  
  .actions {
    justify-content: center;
  }
}
</style> 